{% extends "base.html" %}

{% block title %}修改密码 - DRF 学习项目{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="text-center mb-4">
        <h2 class="h4 mb-3">🔒 修改密码</h2>
        <p class="text-muted">为了安全起见，请修改您的密码</p>
    </div>

    {% if form.errors %}
        <div class="alert alert-danger">
            <strong>修改失败：</strong>
            {% for field, errors in form.errors.items %}
                {% for error in errors %}
                    <div>{{ error }}</div>
                {% endfor %}
            {% endfor %}
        </div>
    {% endif %}

    <form method="post">
        {% csrf_token %}

        <div class="mb-3">
            <label for="{{ form.old_password.id_for_label }}" class="form-label">当前密码</label>
            <input type="password" class="form-control" id="{{ form.old_password.id_for_label }}"
                   name="{{ form.old_password.name }}" placeholder="请输入当前密码" required>
        </div>

        <div class="mb-3">
            <label for="{{ form.new_password1.id_for_label }}" class="form-label">新密码</label>
            <input type="password" class="form-control" id="{{ form.new_password1.id_for_label }}"
                   name="{{ form.new_password1.name }}" placeholder="请输入新密码" required>
        </div>

        <div class="mb-3">
            <label for="{{ form.new_password2.id_for_label }}" class="form-label">确认新密码</label>
            <input type="password" class="form-control" id="{{ form.new_password2.id_for_label }}"
                   name="{{ form.new_password2.name }}" placeholder="请再次输入新密码" required>
        </div>

        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary btn-lg">修改密码</button>
            <a href="{% url 'login' %}" class="btn btn-secondary">取消</a>
        </div>
    </form>

    <!-- 密码要求说明 -->
    <div class="mt-4 p-3 bg-light rounded">
        <h6 class="text-muted mb-2">🔐 密码要求</h6>
        <small class="text-muted">
            <div>• 密码长度至少 8 位</div>
            <div>• 不能与用户名过于相似</div>
            <div>• 不能是常见密码</div>
            <div>• 不能全为数字</div>
        </small>
    </div>
</div>
{% endblock %}
